<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Outdated Browser</title>
    <!-- Styles -->
    <link rel="stylesheet" href="./outdatedbrowser/outdatedbrowser.min.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style type="text/css">
        body {
            font-family: 'Open Sans', sans-serif; text-align: center;
            background-color: #fafafa; color: #0a0a0a; line-height: 1.5em;
        }
        h1{font-size: 2.6em; line-height: 2em;}
        h3, h4{line-height: 1em; margin: 2.5em 0 -.4em 0; text-transform: uppercase;}
        h3 span, h4 span{text-transform: none;}
        p{padding-bottom: 1em;}
        p.designBy{position: absolute; bottom: 0; right: 1em; font-size: .8em;}
        a {color: #0a0a0a;}
        ul{list-style-type: none; padding: 0;}
    </style>
</head>

<body>
<!-- ============= Outdated Browser ============= -->
<div id="outdated"></div>


<!-- javascript includes -->
<script src="./outdatedbrowser/outdatedbrowser.min.js"></script>

<!-- plugin call -->
<script>

    var navLang = (navigator.language || navigator.browserLanguage).toLowerCase();

    console.log(navLang);

    //event listener form DOM ready
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }
    //call function after DOM ready
    addLoadEvent(function () {
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'borderImage',
            languagePath: './outdatedbrowser/lang/' + navLang + '.html'
        });
    });
</script>
</body>
</html>
